<template>
  <div class="tab-bar">
    <van-tabbar v-model="currentIndex" active-color="#ff9854">
      <template v-for="(item,index) in tabbarData" :key="index">
        <van-tabbar-item :to="item.path">
          <span>{{ item.text }}</span>
          <template #icon>
            <!-- <img :src="currentIndex === index ? getAssetsFile(item.imageActive) : getAssetsFile(item.image)" /> -->
            <img :src="getAssetsFile(item.image)" alt="" v-if="currentIndex !== index">
            <img :src="getAssetsFile(item.imageActive)" alt="" v-else>
          </template>
        </van-tabbar-item>
      </template>

    </van-tabbar>

  </div>
</template>

<script setup>
import { ref } from 'vue'
import tabbarData from '@/assets/data/tabbar.js'
import { getAssetsFile } from '@/utils/load_assets.js'

const currentIndex = ref(0)
</script>

<style lang="less" scoped>
.tab-bar {
  --van-tabbar-item-icon-size: 60px;

  :deep(.van-tabbar-item__icon) {
    font-size: 56px;
  }

  img {
    height: 56px;
  }
}
</style>